<template>
    <div class="register-container">
      <h2>新用户注册</h2>
      <p>加入编程导航知识星球</p>
      
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="username" placeholder="请输入用户名" required>
        </div>
        
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" v-model="email" placeholder="请输入邮箱" required>
        </div>
        
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="password" placeholder="请输入密码" required>
        </div>
        
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请再次输入密码" required>
        </div>
        
        <div class="form-group agree">
          <input type="checkbox" id="agree" v-model="agree" required>
          <label for="agree">我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a></label>
        </div>
        
        <button type="submit">注册</button>
        
        <div class="login-link">
          已有账号？<router-link to="/login">立即登录</router-link>
        </div>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        agree: false
      }
    },
    methods: {
      async handleRegister() {
        // 表单验证
        if (this.password !== this.confirmPassword) {
          alert('两次输入的密码不一致')
          return
        }
        
        try {
          // 模拟注册请求
          await this.$axios.post('/api/register', {
            username: this.username,
            email: this.email,
            password: this.password
          })
          
          alert('注册成功，请登录')
          this.$router.push('/login')
        } catch (error) {
          console.error('注册失败:', error)
          alert('注册失败，请重试')
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .register-container {
    width: 350px;
    margin: 0 auto;
    padding: 40px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  h2 {
    color: #1890ff;
    margin-bottom: 10px;
  }
  
  p {
    color: #8c8c8c;
    margin-bottom: 30px;
  }
  
  .form-group {
    margin-bottom: 20px;
    text-align: left;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .form-group.agree {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .form-group.agree input {
    margin-right: 5px;
  }
  
  .form-group.agree a {
    color: #1890ff;
    text-decoration: none;
  }
  
  button {
    width: 100%;
    padding: 12px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }
  
  button:hover {
    background-color: #40a9ff;
  }
  
  .login-link {
    margin-top: 20px;
    color: #8c8c8c;
  }
  
  .login-link router-link {
    color: #1890ff;
    text-decoration: none;
  }
  </style>
      